<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    td {
        width: 150px;
        margin: auto;
        text-align: center;
    }
    
    .red {
        color: red;
        font-weight: bold;
    }
    
    img {
        width: 50px;
    }
</style>

<body>
    <div id="app">
        <table>
            <thead>
                <th>id</th>
                <th>tags</th>
                <th>title</th>
                <th>status</th>
                <th>qty</th>
                <th>reward</th>
                <th>icon</th>
                <!-- <th>bid</th> -->

            </thead>
            <tbody>
                <tr v-for="(item,index) in tasks" :key="index">
                    <td>{{item.id}}</td>
                    <td>{{item.tags}}</td>
                    <td>{{item.title}}</td>
                    <td>{{item.status|statusStr}}</td>
                    <td><span :class="item.qty>0?'red':''">{{item.qty}}</span></td>
                    <td>{{item.reward}}</td>
                    <td> <img :src="item.icon" alt=""></td>
                    <!-- <td>{{item.bid}}</td> -->

                </tr>
            </tbody>
        </table>
        <p>----------------------------------------------------------------------------------------</p>
        <table>
            <thead>
                <th>id</th>
                <th>start_date</th>
                <th>title</th>
                <th>icon</th>
            </thead>
            <tbody>
                <tr v-for="(item,index) in list" :key="index">
                    <td>{{item.id}}</td>
                    <td>{{item.start_date}}</td>
                    <td>{{item.title}}</td>
                    <td> <img :src="item.icon" alt=""></td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
<script src="https://cdn.bootcss.com/vue/2.5.22/vue.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            msg: '666',
            list: [],
            tasks: []
        },
        created() {
            // setInterval(() => {
            axios.get('./taskList.json').then(res => {
                vm._data.list = res.data.payload.incoming;
                vm._data.tasks = res.data.payload.tasks
            });
            // }, 300)
        },
        filters: {
            statusStr: function(val) {
                if (val === 2) {
                    return '进行中...'
                } else {
                    return val
                }
            }
        }
    });
</script>

</html>